<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<title>Icon</title>
		<link href="../../themes/iphone/base.css" rel="stylesheet"/>
		<link href="../../themes/iphone/IconContainer.css" rel="stylesheet"/>

		<style>
			.box {
				border: 1px solid #A7C0E0;
				width: 300px;
				height: 250px;
				background-image: url(../images/widget-bg.png);
				background-repeat: no-repeat;
				background-color: white;
			}
		</style>
		<script type="text/javascript" src="../../../../dojo/dojo.js" djConfig="parseOnLoad: true"></script>

		<script type="text/javascript" src="TestUtil.js"></script>
		<script language="JavaScript" type="text/javascript">
			//dojo.require("dojo.parser"); // Use the lightweight parser.
			dojo.require("dojox.mobile.parser");
			dojo.require("dojox.mobile");
			dojo.require("dojox.mobile.View");
			dojo.require("dojox.mobile.IconContainer");
			dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat");

	        dojo.require("doh.runner");

			dojo.addOnLoad(function(){
				doh.register("dojox.mobile.test.doh.IconContainer", [
					{
						name: "IconContainer Verification",
						timeout: 4000,
						runTest: function(){
							var d = new doh.Deferred();
							setTimeout(d.getTestCallback(function(){
								var demoWidget = dijit.byId("dojox_mobile_IconContainer_0");
								doh.assertEqual('mblIconContainer', demoWidget.domNode.className);
								
							}));
							return d;
						}
					},
					{
						name: "IconItem Verification",
						timeout: 4000,
						runTest: function(){
							var d = new doh.Deferred();
							var demoWidget = dijit.byId("dojox_mobile_IconItem_0");
							fireOnMouseDown(demoWidget.domNode);
							fireOnMouseUp(demoWidget.domNode);

							demoWidget = dijit.byId("dojox_mobile_IconItem_1");
							doh.assertEqual('none', demoWidget.paneWidget.domNode.style.display);
							fireOnMouseDown(demoWidget.domNode);
							fireOnMouseUp(demoWidget.domNode);
							var t = 1000;
							if(dojo.isIE || dojo.isAndroid || dojo.isIPhone || dojo.isBB) {
								t=2500;
							}

							setTimeout(d.getTestCallback(function(){
								var demoWidget = dijit.byId("dojox_mobile_IconItem_0");
								verifyRect(demoWidget.domNode.childNodes[0].childNodes[0].childNodes[0].childNodes[0], "0px", "64px", "64px", "0px");
								verifyIconItem("dojox_mobile_IconItem_0", 'app1', 'none', /icon-all.png/i, true);
								verifyIconItem("dojox_mobile_IconItem_1", 'app2', '', /icon-all.png/i, true);
								
							}),t);
							return d;
						}
					}
				]);
				doh.run();
			});
		</script>
	</head>
	<body>
		<div id="foo" dojoType="dojox.mobile.View" selected="true">
			<h1 dojoType="dojox.mobile.Heading">Icon Container</h1>
			<ul dojoType="dojox.mobile.IconContainer" transition="slide" single="true" pressedIconOpacity="0.8" iconBase="../images/icon-all.png" iconPos="0,0,64,64" back="Test" label="test">
				<li dojoType="dojox.mobile.IconItem" label="app1" lazy="true"><div class="box"></div></li>
				<li dojoType="dojox.mobile.IconItem" label="app2" iconPos="0,64,64,64" lazy="true"><div class="box"></div></li>
				<li dojoType="dojox.mobile.IconItem" label="app3" iconPos="0,64,64,64" lazy="true"><div class="box"></div></li>
				<li dojoType="dojox.mobile.IconItem" label="moveTo" iconPos="0,64,64,64" moveTo="about" transition="slide"></li>
				<li dojoType="dojox.mobile.IconItem" label="href" iconPos="0,64,64,64" href="../test_iPhone-RoundRectList.html" transition="slide"></li>
				<li dojoType="dojox.mobile.IconItem" label="url" iconPos="0,64,64,64" url="../view-sample.html" transition="slide"></li>
			</ul>
		</div>

		<div id="about" dojoType="dojox.mobile.View">
			<h1 dojoType="dojox.mobile.Heading" back="Icon Container" moveTo="foo">About</h1>
			<h2 dojoType="dojox.mobile.RoundRectCategory">My Phone</h2>
			<ul dojoType="dojox.mobile.RoundRectList">
				<li dojoType="dojox.mobile.ListItem" rightText="AcmePhone">
					Network											   
				</li>												   
				<li dojoType="dojox.mobile.ListItem" rightText="AcmePhone">
					Line
				</li>
				<li dojoType="dojox.mobile.ListItem" rightText="1024">
					Songs
				</li>
			</ul>
		</div>
	</body>
</html>
